<template>
    <el-tabs v-model="activeName" class="demo-tabs" >
    <el-tab-pane  v-for="item in label" :key="item.name" :label="item.label" :name="item.name">
        <div class="div1">
            <div class="div2" >
                    <span v-for="NewsItem,index in  newsList" @click="toNewsPage(NewsItem)" :key="index">
                        <img :src="
                            'http://localhost:3000'+NewsItem.cover
                        " alt="">
                        <div style="display: flex;
                        flex-direction: column; flex: 1; margin-top:10px ;" >
                           <el-text class="font_title"  tag="b" >{{ NewsItem.title }}</el-text>
                            <el-text class="font_time">{{ Store.editTime(NewsItem.editTime)  }}</el-text>
                        </div>  
                    </span>
            </div>
            <div class="div3">  
                <div style="margin:10% 10% ;">
                    <el-timeline>
                        <el-timeline-item
                        v-for="(NewsItem, index) in newsList"
                        :key="index"
                        type="primary"
                        >
                        <div style="display: flex;
                        flex-direction: column;">
                            <el-text  line-clamp="3" class="font_title"  tag="b" >{{ NewsItem.title }}</el-text>
                            <el-text class="font_time">{{ Store.editTime(NewsItem.editTime)  }}</el-text>
                        </div>
                        </el-timeline-item>
            </el-timeline>
                </div>
            </div>  
        </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {useStore} from "@/stores/counter.js";
import { useRouter } from 'vue-router';
const Store = useStore()
const newsList = ref()
const Router = useRouter()
const label = ref([
{       
    name:1,
    label:'最新动态',
},
{
    name:2,
    label:'典型案例'
},
{
    name:3,
    label:'通知公告'
}
])
const props =  defineProps({
    newsList:''
  })

onMounted(()=>{
    setTimeout(()=>{
             newsList.value =   props.newsList.filter(element => {
            if (element.category === 1) {
            return element;
            }
         });
    },200)
})
const toNewsPage = (value) => {
    Router.push({
        name:'newpage',
        query:{
            new:JSON.stringify(value)
        }
    })
}
const activeName = ref(1)
watch(activeName,(newValue,oldValue)=>{
    newsList.value =   props.newsList.filter(element => {
            if (element.category === newValue) {
            return element;
            }
         });
        })
</script>

<style scoped>
 .div1{
    width: 100%;
    display: flex;
    justify-content: space-between;
    
 }
 .div2{
   width: 65%;
    display: flex;
    flex-direction: column;
   
 
 }
 .div3{
   width: 25%;
    background: white;
    margin:10px 10px ;
    box-shadow: inset -8px -8px 8px rgba(255,255,255,0.3),
         inset 8px 8px 8px rgba(0,0,0,0.3),
         -8px -8px 10px rgba(0,0,0,0.4)
    ;
    border-radius:8px ;
 }
 .div2>span{
    width: 100%;
    padding: 10px 10px;
    margin:10px 10px ;
    height: 2rem;
    box-shadow: inset -8px -8px 8px rgba(255,255,255,0.3),
         inset 8px 8px 8px rgba(0,0,0,0.3),
         -8px -8px 10px rgba(0,0,0,0.4)
    ;
    border-radius:8px ;
    background: white;
    display: flex;
    transition: all 0.3s;
 }
 .div2>span>img{
    height: 100%;
    border-radius:8px ;
  

 }
 .font_title{
    width: 90%; font-size: 0.2rem; color: black;
}
.font_time{
    width: 90%;  font-size: 0.2rem; font-weight: 600;
    margin-top:2% ;
}
.div2>span:hover{
    box-shadow:  0 0 15px rgba(0,0,0,0.5);
    transform: translateY(-8px) scale(1.01,1.01);
}
@media (max-width: 450px) {
    .div3{
        display: none;
    }
    .div2{
        width: 90%;
    }
    
    
}
</style>